<style lang="scss">

</style>

<template>
  <div>
    <z-space vertical>
      <h3>右键菜单</h3>



     <div v-right-click:[]="rightMenuObj">测试复制111</div>

      <img src="http://localhost:7001/public/img.png" v-right-click:[params]="rightMenuObj" />
<!--      <z-crud-table ref="table" class="batch-select" :obj="obj">-->
<!--      </z-crud-table>-->
<!--      <p>按住Ctrl 拖拽选择</p>-->
<!--      <h3>方法</h3>-->
<!--      <doc-props :data="doc.methods" def-type="Methods"></doc-props>-->
      <vue-code-mirror :tpl="doc.d1" :js="doc.d2"></vue-code-mirror>
    </z-space>
  </div>
</template>

<script>
import DocProps from "@example/plugins/example/components/DocProps";
import {useGridBatchSelect} from "../../../babel-static/hooks";
import VueCodeMirror from "@example/components/VueCodeMirror";

export default {
  components: {VueCodeMirror, DocProps},
  data() {
    return {
      doc: {
        props: [
          {
            name: 'def',
            type: 'Object',
            defVal: '{columns: [], records: []}',
            desc: '定义'
          }
        ],
        methods: [
          {
            name: 'getSelectedUUIDS',
            desc: '获取选中的UUIDs',
            params: ''
          },
        ],
        d1: `
<div v-right-click:[]="rightMenuObj">测试复制111</div>
        `,
        d2: `
export default {
 computed: {
  rightMenuObj() {
      // 右键菜单对象，菜单内容和处理事件
      let self = this
      const obj = {
        // this: this,
        text(e) {
         e.target // 目标元素
         e.hasSelectionChange // 是否有文字选中
          if (e.hasSelectionChange) {
            return [
              {
                name: '复制',
                command: 'copy'
              }
            ]
          }
          return  [
            {
              name: '复制',
              command: 'copy'
            },
            {
              name: '转发',
              command: 'send'
            }
          ]
        },
        handler: {
          async click(parameter) {
            // console.log(parameter)
            parameter.command
            parameter.selectedText
            parameter.target
          }
        }
      };
      return obj;
    }
 }
}

        `
      },
    }
  },
  computed: {
    params() {
      return {id: 1}
    },
    rightMenuObj() {
      // 右键菜单对象，菜单内容和处理事件
      let self = this
      const obj = {
        // this: this,
        text(e) {
          console.log(e)
          if (e.hasSelectionChange) {
            return [
              {
                name: '复制',
                command: 'copy'
              }
            ]
          }
          return  [
            {
              name: '复制',
              command: 'copy'
            },
            {
              name: '转发',
              command: 'send'
            }
          ]
        },
        handler: {
          async click(parameter) {
            // console.log(parameter)
            if (parameter.command === 'copy') {
              let text = parameter.selectedText ?? parameter.target.innerText
              console.dir(parameter.target)
              if (typeof text !== 'undefined' && text) {
                parameter.ctx.keepSelection()
                self.$copyText(text)
                parameter.ctx.restoreSelection('clear')
              } else {
                // let res = await fetch(parameter.target.src)
                // let blob = await res.blob()
                // // console.log(blob)
                // let item = [new ClipboardItem({[blob.type]: blob})]
                // await navigator.clipboard.write(item)
              }
            }
          }
        }
      };
      return obj;
    }
  },
  setup(props, ctx) {
    let tool = useGridBatchSelect(props, ctx)
    return {
      tool
    }
  },
  methods: {

  }
}
</script>
